<template>
	<view class="page">
    <view class="header">
      <u--image class="logoImg" width="40px" height="40px" src="http://127.0.0.1:3000/app/logo.jpg" shape="circle"></u--image>
      <view class="search-box" @click="goToMyPage">
        <text class="search-placeholder">输入想要的商品</text>
      </view>
    </view>
    <u-swiper keyName="img" height="260px" :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
    <u-notice-bar :text="noticeText"  fontSize="40rpx" mode="closable"></u-notice-bar>
		<u-button size="large" text="Go!去回收" type="primary" shape="circle" style="margin-top: 20rpx;" @click="goRecycle"
    color="linear-gradient(to right, rgb(212, 243, 6), rgb(73, 250, 6))"></u-button>

    <u-grid class="productClass" :border="true">
      <u-grid-item v-for="(item,index) in productClass" :key="index" @click="goProduct(index)" class="productClass-item">
        <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" :size="22" class="productClass-name"></u-icon>
        <text class="productClass-namet">{{item.name}}</text>
      </u-grid-item>
    </u-grid>
    <view class="videoBox">
			<video @click="currentVideo=1" :class="currentVideo===1?'active':'deactive'" class="video" play-btn-position="center" controls="false"
				src="http://127.0.0.1:3000/video/003.mp4"></video>
			<video @click="currentVideo=2" :class="currentVideo===2?'active':'deactive'" class="video" play-btn-position="center" controls="false" 
				src="http://127.0.0.1:3000/video/002.mp4"></video>
			<video @click="currentVideo=3" :class="currentVideo===3?'active':'deactive'" class="video" play-btn-position="center" controls="false"
				src="http://127.0.0.1:3000/video/001.mp4"></video>
		</view>
    
  </view>
</template>

<script>
  import { baseUrl } from '@/config'
export default {
	name: 'HomeIndex',
	components: {
	
	},
	data() {
		return {
      currentVideo: 2,
      noticeText: '闲置衣物别丢弃, 环保回收有新意, 给旧衣找个新家, 你我共守绿意，你手中的旧衣, 可以焕发出新的生命，旧衣不是废物, 环保始于回收, 你我做起',
      swiperList:[],
      productClass:[],
      keyword: ''
		};
	},
	onShow() {
    this.getSwiper(),
    this.getProductClass()
	},
	methods: {
    goProduct(index){
      uni.navigateTo({
              url: `/pages/product/index?index=${index}`
            })
    },
    
    goRecycle(){
      uni.switchTab({url: "/pages/recycle/index"})
    },
    goToMyPage() {
      uni.navigateTo({
        url: '/pages/search/index'
      });
    },
   getSwiper(){
    uni.request({
        url: baseUrl+'/v1/index/picSearch', 
        success: (res) => {this.swiperList = res.data.data}
                });
    },
    getProductClass(){
      let obj = {
        name: '全部分类',
        code: '9',
				status:'1',
        icon: baseUrl + '/image/009.jpg',
			};
      uni.request({
        url: baseUrl+'/v1/index/productClassSearch', 
        success:(res)=>{
          this.productClass = res.data.data
          this.productClass.push(obj);
        }
      })
      
    }
	}

};
</script>

<style lang="scss" scoped>
.page{
    position: relative;
  .header {
    display: flex;
    align-items: center;
    padding: 20rpx;
  }
  .logoImg{
    width: 40px;
    height: 40px;
    margin-right: 20rpx;
  }
  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 40rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }
  .search-placeholder {
    color: #999;
    font-size: 28rpx;
    margin-left: 20rpx;
  }
  .productClass {
		display: flex;
	  flex-wrap: wrap;
	  padding: 10rpx;
	  border-radius: 20rpx;
	  margin: 40rpx 10rpx;
	  box-shadow: 0upx 0upx 20upx 10uphsla(131, 86%, 47%, 0.2);
  }
  .videoBox {
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.video {
			margin: 0 3rpx;
		}
		.active{
			width: calc(70% - 6rpx);
		}
		.deactive{
			width: calc(15% - 6rpx);
		}
	}
}
</style>
